import { h, VNode } from 'snabbdom';
import { DomEditor, IDomEditor, SlateElement } from '@wangeditor/editor';
import { Timeline } from './custom-types';
import renderComponent from './renderComponent';

function renderLinkCard(elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode {
  const selected = DomEditor.isNodeSelected(editor, elem); // 当前节点是否选中
  const { date } = elem as Timeline;
  // 文字部分
  const infoVnode = h(
    'div',
    {
      props: {
        className: 'w-e-textarea-time-line-text-container',
      },
      style: {
        display: 'flex',
        alignItems: 'center',
      },
    },
    [
      h(
        'div',
        {
          style: {},
          props: {
            className: 'w-e-textarea-time-line-text',
          },
          on: {
            click: (event) => {
              const element: any = document.elementFromPoint(event.clientX, event.clientY); // 获取点击的元素
              //判断当前点击的元素是否为时间线节点并且是否已经插入过日期选择器组件
              if (
                element.children.length == 0 &&
                element.classList[0] == 'w-e-textarea-time-line-text'
              ) {
                // 获取body并且创建一个新的div节点
                const bindComponent = document.createElement('div');
                // 给创建的div设置class，并且添加到指定的DOM后
                bindComponent.setAttribute('class', 'timepicker');
                // 将创建的div插入当前节点下
                element.appendChild(bindComponent);
                // 在创建的div中插入日期选择器
                insert(element.children[0]);
              }
            },
          },
        },
        date,
      ),
      h(
        'div',
        {
          //设置分割线的样式
          style: {
            width: '100%',
            height: '2px',
            backgroundColor: '#e2e3e5',
            flex: '1',
          },
        },
        '',
      ),
    ],
  );
  // 容器
  const vnode = h(
    'div',
    {
      props: {
        contentEditable: false, // 不可编辑
        className: 'w-e-textarea-time-line-container', // 容器类名
      },
      dataset: {
        selected: selected ? 'true' : '', // 标记为 选中
      },
      on: {
        mousedown: (event) => event.preventDefault(), // 阻止事件冒泡
      },
    },
    // 子节点
    [infoVnode], // 文字
  );
  return vnode;
}

const renderElemConf = {
  type: 'time-line', // 节点 type ，重要！！！
  renderElem: renderLinkCard,
};

const appContext: any = getCurrentInstance(); // 这个appContext 是当前根组件上下文？  官网没找到说明
let destroyComp: any = null;
// onUnmounted(() => destroyComp?.())
const insert = async (dom: any) => {
  destroyComp?.();
  const date = new Date().toLocaleDateString();
  destroyComp = renderComponent({
    el: dom, //  组件要插入的那个dom
    component: (await import('./DatePicker.vue')).default, // 导入日期选择组件
    props: {
      // 将当前选中的dom节点通过props传入到DatePicker.vue组件中
      date: date,
    },
    appContext, // 获取组件实例的
  });
};
//导出clickPosition和conf
export default renderElemConf;
